<!DOCTYPE html>
<html lang="zh-CN" style="color-scheme: dark;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Asorn - Product Designer</title>
    <link rel="stylesheet" href="./css/style.min.css">
    <link rel="shortcut icon" href="./assets/public/favicon.svg"/>
    <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
</head>
<body>
    <canvas class="fireworks"></canvas>
    <div class="head">
        <div class="main">
            <a href="./index.html" class="logo"><img src="./assets/public/logo_text.svg"></a>
            <div class="menu">
                <li class="magical btn nav" onclick="window.location.href='./index.html'">Home</li>
                <li class="magical btn" onclick="window.location.href='./work.html'">Work</li>
                <li class="magical btn" onclick="window.location.href='./blog.html'">Blog</li>
                <li class="magical btn" onclick="window.location.href='./about.html'">About</li>
            </div>
            <div class="menu" id="menu-expand">
                <li class="magical btn skin" id="menu-expand-child"><i class="icon menu-icon"></i></li>
            </div>
            <div id="menu-panel">
                <div class="menu-panel-content">
                    <li class="magical btn nav" onclick="window.location.href='./index.html'">Home</li>
                    <li class="magical btn" onclick="window.location.href='./work.html'">Work</li>
                    <li class="magical btn" onclick="window.location.href='./blog.html'">Blog</li>
                    <li class="magical btn" onclick="window.location.href='./about.html'">About</li>
                </div>
            </div>
        </div>
        <blockquote><img src="./assets/public/logo.svg"></blockquote>
    </div>
    <div class="index">
        <div class="hello">
            <div class="title">
                <div class="title-hi">Hi, I'm</div>
                <a class="title-name" href="https://asorn.cn">Asorn</a>
            </div>
            <div class="hello-desc" id="typed"></div>
        </div>
        <div class="content-divider"></div>
        <div class="quickly-link">
            <div class="title-hi">What did I do</div>
            <div class="loader"></div>
            <div class="link-card">
                <div class="link-card-list">
                    <div class="magical link-card-item">
                        <a href="https://larkmap.com" target="_blank">
                            <img src="./assets/index/larkmap.png" alt="">
                            <div class="info">
                                <div class="info-title">Larkmap</div>
                                <div class="info-desc">Designer website navigation</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://qingicon.com" target="_blank">
                            <img src="./assets/index/qingicon.png" alt="">
                            <div class="info">
                                <div class="info-title">QingIcon</div>
                                <div class="info-desc">2200+ fill, dual color icon</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://www.figma.com/community/plugin/1111565622161029659" target="_blank">
                            <img src="./assets/index/figicon.png" alt="">
                            <div class="info">
                                <div class="info-title">Figicon</div>
                                <div class="info-desc">Figma icon library plugin</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://www.figma.com/community/plugin/1286263811056993042" target="_blank">
                            <img src="./assets/index/rpb.png" alt="">
                            <div class="info">
                                <div class="info-title">RPB</div>
                                <div class="info-desc">Replace the Figma page background</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://adapter.biliui.com" target="_blank">
                            <img src="./assets/index/adapter.png" alt="">
                            <div class="info">
                                <div class="info-title">Q-Adapter</div>
                                <div class="info-desc">B-end product layout adaptation</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://biliui.com" target="_blank">
                            <img src="./assets/index/biliui.png" alt="">
                            <div class="info">
                                <div class="info-title">Biliui</div>
                                <div class="info-desc">First generation blog</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://nav.dippermap.com/" target="_blank">
                            <img src="./assets/index/dippermap.png" alt="">
                            <div class="info">
                                <div class="info-title">Dippermap</div>
                                <div class="info-desc">Open source GIS navigation tools</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 8V0H4.5V8H3.5Z" fill="#62616F"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4.5H0V3.5H8V4.5Z" fill="#62616F"></path>
                </svg>
                <div class="link-card-list">
                    <div class="magical link-card-item">
                        <a href="https://www.yuque.com/asorn" target="_blank">
                            <img src="./assets/index/yuque.png" alt="">
                            <div class="info">
                                <div class="info-title">Yu Que</div>
                                <div class="info-desc">My knowledge garden</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://github.com/asorn" target="_blank">
                            <img src="./assets/index/github.png" alt="">
                            <div class="info">
                                <div class="info-title">Github</div>
                                <div class="info-desc">My code garden</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://www.figma.com/@asorn" target="_blank">
                            <img src="./assets/index/figma.png" alt="">
                            <div class="info">
                                <div class="info-title">Figma</div>
                                <div class="info-desc">My design garden</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="copyright">
            <div>© 2023 Design by <a href="https://asorn.cn/" target="_blank">Asorn</a></div>
            <span>|</span>
            <div class="fillings">
                <a href="https://asorn.cn/" target="_blank">Asorn</a>
            </div>
            <span>|</span>
            <div class="friends">
                <a href="https://zdo.fun/" target="_blank">ZDO</a>
            </div>
        </div>
    </div>
    <div class="widget">
        <div class="shape-light"></div>
        <div class="shape-star">
            <div class="rising-stars rising-stars-visible">
                <div style="height:1px;width:1px"></div>
                <div style="height:2px;width:2px"></div>
                <div style="height:1px;width:1px"></div>
            </div>
        </div>
        <div class="shape-earth"></div>
    </div>
</body>
<script>
    // 打字效果，感谢 typed.js: https://mattboldt.github.io/typed.js/docs/
    const options = {
        strings: [
            ">_ welcome to my secret garden ^1000",
            ">_ and let's explore it now ^1000",
        ],
        typeSpeed: 50, // 打印速度
        backSpeed: 20, // 回退速度
        startDelay: 300, // 开始之前的延迟300毫秒
        loop: true, // 是否循环
        showCursor: false, // 不显示光标
    };
    const typed = new Typed('#typed', options);
</script>
<script src="./js/main.min.js"></script>
<script src='./js/anime.js'></script>
<script src='./js/firework.js'></script>
</html>